<template>
    <div class="header">
        <div class="header-left">
            <img class="logo-icon" :src="Union" alt="" />
            <span class="logo-text">产品物料管控平台</span>
        </div>
        <div class="header-toggle" @click="Collapse">
            <svg-icon v-if="isCollapse" name="展开" />
            <svg-icon v-else name="收起" />
        </div>
    </div>

    <div class="flex-container">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"
                @select="handleMenuSelect">
                <el-menu-item index="1">
                    <el-icon><icon-menu /></el-icon>
                    <template #title>AI聊天</template>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <template #title>规则库构建</template>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <template #title>物料质量检验</template>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <Notebook />
                    </el-icon>
                    <template #title>知识库</template>
                </el-menu-item>
                <el-menu-item index="5">
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <template #title>物料质量检验详情</template>
                </el-menu-item>
                <el-menu-item index="6">
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <template #title>规则录入</template>
                </el-menu-item>
                <el-menu-item index="7">
                    <el-icon>
                        <SetUp />
                    </el-icon>
                    <template #title>规范文件标签维护</template>
                </el-menu-item>
            </el-menu>
        </div>

        <!-- 右侧内容区 -->
        <div class="main-content">
            <div class="main-header">
                <div class="Assistant">
                    <xcmg-button @click="handleAssistant">助手</xcmg-button>
                    <xcmg-button @click="handleAIdrawer">抽屉助手</xcmg-button>
                </div>
            </div>

            <div class="content-container">
                <router-view v-slot="{ Component }">
                    <component :is="Component" />
                </router-view>
            </div>
        </div>
    </div>

    <aiAssistant v-model:visible="aiVisible" title="徐工物料规范助手"></aiAssistant>
    <AIdrawer v-model:visible="aiDVisible" title="问AI"></AIdrawer>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import Union from '@/assets/images/Union.png'
import { useToggle } from '@/hooks/useToggle'
import aiAssistant from '@/components/aiAssistant.vue'
import AIdrawer from '@/components/AIdrawer.vue'
import { useRouter, useRoute } from 'vue-router'
import { Menu as IconMenu, Setting, Notebook, SetUp } from '@element-plus/icons-vue'
import { SvgIcon } from 'xcmg-components'

const router = useRouter()
const route = useRoute()

// 菜单折叠状态
const isCollapse = ref(false)

// 根据当前路由设置激活菜单项
const activeIndex = computed(() => {
    const routeMap = {
        '/AIChat': '1',
        '/ruleBase': '2',
        '/materialQualityTest': '3',
        '/knowledgeBase': '4',
        '/materialQualityDetails': '5',
        '/normativeEntry': '6',
        '/authorityFile': '7',
        '/': '3'
    }
    return routeMap[route.path] || '3'
})

const [aiVisible, aiAssistantVisible] = useToggle()
const [aiDVisible, AIdrawerVisible] = useToggle()

const Collapse = () => {
    isCollapse.value = !isCollapse.value
}

const handleAssistant = () => {
    aiAssistantVisible()
}

const handleAIdrawer = () => {
    AIdrawerVisible()
}

// 菜单选择处理
const handleMenuSelect = (index: string) => {
    const routeMap = {
        '1': '/AIChat',
        '2': '/ruleBase',
        '3': '/materialQualityTest',
        '4': '/knowledgeBase',
        '5': '/materialQualityDetails',
        '6': '/normativeEntry',
        '7': '/authorityFile',
    }
    router.push(routeMap[index])
}
</script>

<style scoped>
/* Header 样式 */
.header {
    display: flex;
    background-color: #E8F2FD;
    height: 56px;
    padding: 0;
}

.header-left {
    display: flex;
    align-items: center;
    padding-left: 16px;
    /* pl-4 */
}

.logo-icon {
    margin-right: 4px;
    /* mr-1 */
    margin-top: 0.8px;
    /* mt-0.2 */
    height: 24px;
    /* h-6 */
}

.logo-text {
    font-weight: bold;
}

.header-toggle {
    padding-left: 48px;
    /* pl-12 */
    margin-top: 16px;
    /* mt-4 */
    cursor: pointer;
}

/* 布局容器 */
.flex-container {
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
}

.sidebar {
    background-color: #E8F2FD;
    z-index: 10;
    height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 220px;
    height: 100%;
    background-color: #E8F2FD;
}

:deep(.el-menu) {
    background-color: #E8F2FD;
    border-right: none;
    height: 100%;
}

/* 主内容区 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.main-header {
    height: 54px;
    background-color: #E8F2FD;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    position: relative;
}

.content-container {
    flex: 1;
    overflow: auto;
    height: calc(100% - 54px);
}

/* 助手按钮 */
.Assistant {
    position: absolute;
    right: 20px;
    top: 10px;
}
</style>